<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

    <canvas id="c1">
        您的浏览器版本过低，不支持canvas，请升级浏览器或更换浏览器
    </canvas>

    <script>
        //方式一
        const canvas1 = document.querySelector('#c1');
        const context1 = canvas1.getContext('2d');

        //方式二
        const canvas2 = document.createElement('canvas');
        document.body.append(canvas2);


        if(!canvas2.getContext){
            console.log('您的浏览器版本过低，不支持canvas，请升级浏览器或更换浏览器');
        }else{
            const context2 = canvas2.getContext('2d');
        }
        
        
    </script>

  </body>
</html>
